import React from "react"
import { TouchableOpacity, Text, View, Image } from "react-native"
import { CalendarTouchableOpacityProps, ICalendarEventBase } from "react-native-big-calendar"
import { statusText, statusTextColor } from "app/constants/statusColor"
import { scale } from "react-native-size-matters"
import { icons } from "app/assets/icons"
import { colors } from "app/theme"

interface ClientType {
  first_name: string
  middle_name?: string
  last_name?: string
}

interface EventType extends ICalendarEventBase {
  status: string
  startHour: string
  booking?: boolean
  clients?: ClientType[]
}

export const RenderDayEvent = <T extends EventType>(
  event: T,
  touchableOpacityProps: CalendarTouchableOpacityProps,
) => {
  return (
    <TouchableOpacity {...touchableOpacityProps}>
      <View style={{ height: scale(70) }}>
        <Text
          numberOfLines={3}
          style={{
            fontSize: scale(12),
            color: statusTextColor[event?.status],
            alignItems: "center",
          }}
        >
          {statusText[event?.status]}
        </Text>
        <Text style={{ color: statusTextColor[event?.status], fontSize: scale(12) }}>
          {event?.startHour}
        </Text>
        {event?.clients?.map((client) => {
          return (
            <Text style={{ color: statusTextColor[event?.status], fontSize: scale(12) }}>
              {client?.first_name +
                " " +
                //   client?.middle_name !== null
                //     ? client?.middle_name
                //     : "" +
                " " +
                client?.last_name}
            </Text>
          )
        })}
      </View>
      <View style={{ bottom: scale(5) }}>
        {event?.booking ? (
          <Image style={{ height: scale(25), width: scale(25) }} source={icons.logo} />
        ) : (
          <View
            style={{
              height: scale(25),
              width: scale(25),
              borderRadius: scale(15),
              backgroundColor: colors.white,
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Image style={{ height: scale(15), width: scale(15) }} source={icons.building} />
          </View>
        )}
      </View>
    </TouchableOpacity>
  )
}
